<ion-header>
  <ion-toolbar color="favorite">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-segment>
      <ion-segment-button value="all">
        所有
      </ion-segment-button>
      <ion-segment-button value="favorites">
        收藏
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-tab-bar slot="top">
    <ion-tab-button>
      <ion-icon name="flash"></ion-icon>
      <ion-label>Login</ion-label>
    </ion-tab-button>
    <ion-tab-button>
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
  <ion-grid>
    <ion-row>
      <ion-col id='col1'>
        col11
      </ion-col>
      <ion-col class="col2">
        col12
      </ion-col>
      <ion-col title='hello'>
        col13
      </ion-col>
    </ion-row>
    <ion-row class='ion-row1'>
      <ion-col>
        col11
      </ion-col>
      <ion-col>
        col12
      </ion-col>
      <ion-col>
        col13
      </ion-col>
    </ion-row>
    <ion-row align-items-center>
      <ion-col align-self-center>
        col21
      </ion-col>
      <ion-col align-self-center>
        col22
      </ion-col>

    </ion-row>
    <ion-row align-items-center>
      <ion-col>
        [center] ion-col
      </ion-col>
      <ion-col>
        [center] ion-col
      </ion-col>
      <ion-col>
        [center] ion-col
      </ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-button (click)="onClick()">
    Click me
  </ion-button>
  <ion-button color="light"> button </ion-button>
  <div style=" width:220px; height: 180px;background: blue;     padding:5px 0; ">
    <div id='box'>
      <div style=" width:100%; height: 100%; background: rgb(204, 204, 151);">
        边框测试
      </div>
    </div>
  </div>
  <h1>Hello World!</h1>
  <h2>Smaller heading!</h2>
  <p>This paragraph has blue text, and is center aligned.</p>

  <div class="marked">
    <p>This paragraph has not blue text.</p>
  </div>
  <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
  <p class="pos_fixed">Some more text： position</p>

</ion-content>